<wide-header-page title="{{ 'Create {coinLabel} Wallet' | translate: {coinLabel: coin.toUpperCase()} }}">
  <ion-buttons right>
    <button clear wide-header-bar-button *ngIf="!isShared || (isShared && coin !== 'eth')" (click)="setOptsAndCreate()" [disabled]="!createForm.valid" ion-button>
      <span translate>Create</span>
    </button>
    <button clear wide-header-bar-button *ngIf="isShared && coin === 'eth' && pairedWallet" (click)="goToCreateEthMultisig()" [disabled]="!createForm.valid" ion-button>
      <span translate>Next</span>
    </button>
  </ion-buttons>
  <div page-content>
    <button class="linked-wallet" *ngIf="isShared && coin === 'eth'" ion-item (click)="showPairedWalletSelector()" detail-none>
      <ion-label>
        <div class="summary-item">
          <span translate>Linked to</span>
        </div>
      </ion-label>

      <ion-note item-end>
        <ion-row align-items-center class="wallet" *ngIf="pairedWallet">
          <ion-col>
            <coin-icon [coin]="pairedWallet.coin" [network]="pairedWallet.network"></coin-icon>
          </ion-col>

          <ion-col>
            <span class="note-container ellipsis">{{pairedWallet.name}}</span>
          </ion-col>
        </ion-row>

        <ion-row align-items-center class="wallet" *ngIf="!pairedWallet">
          <div class="last-item" item-end>
            <button ion-button clear color="grey" icon-only>
              <ion-icon *ngIf="!isOpenSelector" name="ios-arrow-down-outline"></ion-icon>
              <ion-icon *ngIf="isOpenSelector" name="ios-arrow-up-outline"></ion-icon>
            </button>
          </div>
        </ion-row>
      </ion-note>
    </button>

    <form [formGroup]="createForm">
      <ion-item>
        <ion-label floating>{{'Wallet name' | translate}}</ion-label>
        <ion-input type="text" formControlName="walletName"></ion-input>
      </ion-item>

      <div *ngIf="isShared">
        <ion-item *ngIf="coin != 'eth'">
          <ion-label floating>{{'Your name' | translate}}</ion-label>
          <ion-input type="text" formControlName="myName"></ion-input>
        </ion-item>

        <div class="custom-item">
          <div class="label">{{'Required number of signatures' | translate}}</div>
          <div class="buttons-container">
            <button clear class="remove-button" (click)="set('requiredCopayers', this.createForm.value.requiredCopayers - 1)" ion-button>
              <ion-icon name="remove"></ion-icon>
            </button>
            <button clear class="add-button" (click)="set('requiredCopayers', this.createForm.value.requiredCopayers + 1)" ion-button>
              {{createForm.value.requiredCopayers}}
            </button>
          </div>
        </div>

        <div class="custom-item">
          <div class="label">{{'Total number of copayers' | translate}}</div>
          <div class="buttons-container">
            <button clear class="remove-button" (click)="set('totalCopayers', this.createForm.value.totalCopayers - 1)" ion-button>
              <ion-icon name="remove"></ion-icon>
            </button>
            <button clear class="add-button" (click)="set('totalCopayers',this.createForm.value.totalCopayers + 1)" ion-button>
              {{createForm.value.totalCopayers}}
            </button>
          </div>
        </div>

        <label-tip type="info" header="no-header" class="no-arrowhead">
          <div label-tip-body>
            <span translate>Multi-user wallet require multiple devices to set up. It takes longer to complete but it's recommended security configuration for long term storage.</span>
          </div>
        </label-tip>
      </div>

      <button ion-button class="button-standard button-secondary" (click)="showAdvOpts = !showAdvOpts">
        <span *ngIf="!showAdvOpts">{{'Show advanced options' | translate}}</span>
        <span *ngIf="showAdvOpts">{{'Hide advanced options' | translate}}</span>
      </button>

      <ion-item no-lines *ngIf="showAdvOpts && coin === 'btc' && createForm.value.selectedSeed == 'new'">
        <ion-label>Segwit</ion-label>
        <ion-toggle formControlName="useNativeSegwit"></ion-toggle>
      </ion-item>

      <div *ngIf="showAdvOpts" padding-bottom>
        <ion-item *ngIf="!(isShared && coin == 'eth')">
          <ion-label stacked>Wallet Service URL</ion-label>
          <ion-input type="text" formControlName="bwsURL"></ion-input>
        </ion-item>

        <ion-item *ngIf="!keyId">
          <ion-label stacked>{{'Wallet key' | translate}}</ion-label>
          <ion-select okText="{{okText}}" cancelText="{{cancelText}}" formControlName="selectedSeed" (ionChange)="seedOptionsChange(createForm.value.selectedSeed)">
            <ion-option *ngFor="let opt of seedOptions" [value]="opt.id">{{opt.label}}</ion-option>
          </ion-select>
        </ion-item>

        <ion-item *ngIf="createForm.value.selectedSeed == 'set' && !keyId">
          <ion-label stacked>{{'Wallet recovery phrase' | translate}}</ion-label>
          <ion-input type="text" formControlName="recoveryPhrase"></ion-input>
        </ion-item>

        <ion-item [ngClass]="{'with-label': createForm.value.testnetEnabled}" *ngIf="createForm.value.selectedSeed == 'new'">
          <ion-label><span *ngIf="coin === 'eth'">Kovan </span>Testnet</ion-label>
          <ion-toggle formControlName="testnetEnabled" (ionChange)="setDerivationPath()" [disabled]="isShared && coin == 'eth'"></ion-toggle>
        </ion-item>

        <label-tip *ngIf="createForm.value.testnetEnabled && createForm.value.selectedSeed == 'new'" type="warn">
          <span label-tip-title translate>Testnet Wallet</span>
          <div label-tip-body>
            {{ 'The testnet is an alternative {coinName} block chain, to be used for testing. Testnet coins are separate and distinct from actual {coinName}, and do not have any value. This allows application developers or {coinName} testers to experiment, without having to use real {coinName}' | translate : {coinName: coinName } }} .
          </div>
        </label-tip>

        <ion-item *ngIf="createForm.value.selectedSeed == 'set' && !keyId">
          <ion-label stacked>{{'Derivation path' | translate}}</ion-label>
          <ion-input type="text" formControlName="derivationPath"></ion-input>
        </ion-item>

        <ion-item *ngIf="!isSingleAddress()" [ngClass]="{'with-label': createForm.value.singleAddress}">
          <ion-label>{{'Single address' | translate}}</ion-label>
          <ion-toggle formControlName="singleAddress"></ion-toggle>
        </ion-item>
        <label-tip *ngIf="createForm.value.singleAddress" type="info" header="no-header">
          <div label-tip-body>
            <span translate>The single address feature will force the wallet to only use one address rather than generating new addresses.</span>
            <br>
            <a class="label-tip-link" (click)="openSupportSingleAddress()" translate>Learn More</a>
          </div>
        </label-tip>
      </div>
    </form>
  </div>
</wide-header-page>